<%--
  Created by IntelliJ IDEA.
  User: 17598
  Date: 2023/10/11
  Time: 9:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>离职员工</title>
    <link rel="stylesheet" href="../../static/css/element-ui.css">
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/js/axios.min.js"></script>
    <script src="../../static/js/element_index.js"></script>
</head>
<body>
<div id="app">
    <el-form :inline="true" :model="staffForm" class="demo-form-inline">
        <el-form-item label="">
            <el-input v-model="staffForm.staffid" placeholder="请输入员工工号搜索"></el-input>
        </el-form-item>
        <el-form-item label="">
            <el-input v-model="staffForm.staffname" placeholder="请输入员工姓名搜索"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="primary" @click="refresh1">刷新</el-button>
        </el-form-item>
    </el-form>
    <div v-if="staffs.length>0">
        <el-table :cell-style="{'text-align':'center'}"
                  :header-cell-style="{'text-align':'center'}"
                  :data="staffs" style="width: 100%">
            <el-table-column show-overflow-tooltip prop="staffid" prop="staffid" label="员工工号"></el-table-column>
            <el-table-column show-overflow-tooltip prop="staffname" label="员工姓名"></el-table-column>
            <el-table-column show-overflow-tooltip prop="idcard" label="身份证号码"></el-table-column>
            <el-table-column show-overflow-tooltip prop="address" label="地址"></el-table-column>
            <el-table-column show-overflow-tooltip prop="phone" label="电话号码"></el-table-column>
            <el-table-column show-overflow-tooltip prop="entrytime" label="入职日期"></el-table-column>
            <el-table-column show-overflow-tooltip prop="leavetime" label="离职日期"></el-table-column>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="state" label="状态">
                <template slot-scope="scope">
                    <el-tag type="danger" v-if="scope.row.state==0" effect="dark">离职</el-tag>
                </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="branchname" label="店名"></el-table-column>
            <el-table-column show-overflow-tooltip prop="deptname" label="部门名称"></el-table-column>
            <el-table-column show-overflow-tooltip prop="rolename" label="职位"></el-table-column>
        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
    <div v-else>
        <el-empty description="该查询暂无审核数据！">
            <el-button @click="flushed" type="primary">点击刷新</el-button>
        </el-empty>
    </div>
</div>
<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            //所有员工的信息
            staffs: [],
            //总条数
            total: 0,
            //每页显示的大小
            pageSize: 5,
            //当前页码
            current: 1,
            //表单搜索对象
            staffForm: {},
            //branchs所有门店的列表
            branchs: [],
            //
            tableRowClassName: 111
        },
        created() {
            this.initTable();
            // this.initBranch();
        },
        methods: {
            initTable() {
                axios.post("/quitStaff/list?current=" + this.current + "&pageSize=" + this.pageSize, this.staffForm).then(function (res) {
                    app.staffs = res.data.data.list;
                    app.total = res.data.data.total;
                })
            },
            // initBranch() {
            //     axios.get("/quitStaff/list").then(function (resp) {
            //         app.branchs = resp.data.data;
            //
            //     })
            // },
            handleSizeChange(val) {
                this.pageSize = val;
                this.initTable()
            },
            handleCurrentChange(val) {
                this.current = val;
                this.initTable();
            },
            //    刷新方法
            refresh1() {
                this.initTable()
            },
            //搜索
            search() {
                this.initTable();
            },
            flushed() {
                this.staffForm = {};
                this.initTable();
            }
        }
    })
</script>
</html>
